<template>
    {#if attr.type eq 'textarea'}
    <textarea type="{{attr.type}}" name="{{attr.name}}" placeholder="{{attr.placeholder}}" {{attr.disabled}}
        {{attr.required}} {{attr.readonly}} @input="handleInput" cols="{{attr.cols}}" rows="{{attr.rows}}"
        maxlength="{{attr.maxlength}}">{{attr.value}}</textarea>
    {#else}
    <input type="{{attr.type}}" name="{{attr.name}}" placeholder="{{attr.placeholder}}" {{attr.disabled}}
        {{attr.required}} {{attr.readonly}} @input="handleInput" value="{{attr.value}}" />
    {/if}
</template>
<script>
    export default function() {

        let attr = this.reactive({
            type: "text",
            disabled: "",
            placeholder: "",
            name: "",
            required: "",
            readonly: "",
            cols: 5,
            rows: 3,
            maxlength: 100,
            value: ""
        })
        // 初始化事件驱动
        let event = new Event(this);

        // 输入框值改变时触发
        this.handleInput = (e) => {
            // 发出事件
            this.attr.value = e.target.value;
            this.event.emit('onInput', {
                "value": this.attr.value
            });
        }

        // 监听属性
        this.attred = (name, oldValue, newValue) => {
            if (typeof attr[name] != "undefined") {
                attr[name] = (newValue == "" ? name : newValue);
            }
        }

        // 清理事件驱动
        this.cleaned = () => {
            event.destroy();
        }
    }
</script>
<style>
    input,
    textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 2px 4px;
        background-color: var(--white);
        color: var(--black);
        border: 1px solid var(--gray);
        border-radius: var(--border-radius);
    }

    input {
        line-height: 28px;
        height: 28px;
    }

    input:hover,
    textarea:hover {
        border-color: var(--black);
    }

    input:focus,
    textarea:focus {
        border-color: var(--black);
    }

    input:disabled,
    textarea:disabled {
        background-color: var(--gray-shallow);
    }

    input:disabled:hover,
    textarea:disabled:hover {
        cursor: not-allowed;
    }
</style>